/* eslint-disable @typescript-eslint/no-explicit-any */
// 从 antd 库中导入所需的组件
import { Button, Form, Input, message } from 'antd';
// 导入 React 库
import React from 'react';
// 导入登录页面的样式文件
import style from './Login.module.scss';
// 从 @ant-design/icons 库中导入所需的图标
import { LockOutlined, UserOutlined } from '@ant-design/icons';
// 从 react-router-dom 库中导入 useNavigate 钩子，用于页面导航
import { useNavigate } from 'react-router-dom';
// 导入自定义的 API 服务模块
import apiService from '../../api/index';

// 定义登录组件
const Login = () => {
	// 使用 Form.useForm() 钩子创建表单实例
	const [form] = Form.useForm();
	// 使用 useNavigate 钩子获取导航函数
	const navigate = useNavigate();
	// 使用 message.useMessage() 钩子获取消息提示的 API 和上下文持有者
	const [messageApi, contextHolder] = message.useMessage();
	// 使用 React.useState 钩子创建一个状态变量 loading，用于控制加载状态，初始值为 false
	const [loading, setLoading] = React.useState(false);

	// 定义表单提交成功时的回调函数
	const onFinish = (values: any) => {
		// 开始加载，将 loading 状态设置为 true
		setLoading(true);
		// 调用 apiService 的 login 方法发送登录请求
		apiService.login(values).then((res) => {
			// 打印响应结果
			console.log(res);
			// 判断响应的状态码是否为 10000
			if (res.code === 10000) {
				// 显示成功消息提示
				messageApi.open({
					type: 'success',
					content: '登录成功',
					duration: 2,
					// 消息提示关闭时的回调函数
					onClose: () => {
						// 将响应中的 accessToken 和 refreshToken 存储到本地存储中
						localStorage.setItem('token', JSON.stringify(res.data.accessToken));
						localStorage.setItem('refreshToken', JSON.stringify(res.data.refreshToken));
						// 注释掉的代码，可用于存储用户信息
						// localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo));
						// 导航到主页
						navigate('/');
					},
				});
			} else {
				// 显示错误消息提示
				messageApi.open({
					type: 'error',
					content: res.message,
					duration: 2,
					// 消息提示关闭时的回调函数
					onClose: () => {
						// 重置表单字段
						form.resetFields();
					},
				});
			}
			// 无论请求成功还是失败，最后都将 loading 状态设置为 false
		}).finally(() => {
			setLoading(false);
		});
	};

	// 组件的返回值，即渲染的 JSX 内容
	return (
		<div className={style['login']}>
			<div className={style['login-bg']}>
				<h2>欢迎登录</h2>
				<Form
					// 将表单实例赋值给 form 属性
					form={form}
					// 表单名称
					name="login"
					// 表单的初始值
					initialValues={{ remember: true }}
					// 表单的最大宽度
					style={{ maxWidth: 250 }}
					// 表单提交成功时的回调函数
					onFinish={onFinish}
				>
					<Form.Item
						// 表单字段名称
						name="username"
						// 表单字段的验证规则
						rules={[{ required: true, message: '用户名不能为空或输入错误!' }]}
					>
						<Input prefix={<UserOutlined />} placeholder="请输入用户名" />
					</Form.Item>
					<Form.Item
						// 表单字段名称
						name="password"
						// 表单字段的验证规则
						rules={[{ required: true, message: '请输入正确的密码!' }]}
					>
						<Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
					</Form.Item>

					<Form.Item>
						{contextHolder}
						<Button
							// 按钮块级显示
							block
							// 按钮的 HTML 类型为提交
							htmlType="submit"
							// 按钮的类名
							className={style['login-btn']}
							// 按钮的加载状态
							loading={loading}
						>
							登录
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	);
};

// 导出登录组件
export default Login;
